<template>
    <div>
        <van-nav-bar title="缴费订单详情" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
    height:65px;
    background-color: white;
    display: flex;
    border-top: 1px solid #ebedf0;
    ">
            <div style="
            width:35px;
            height:35px;
            margin-top: 15px;
            margin-left: 15px;
            background-color: #36cfc9;
            border-radius: 50%;
            text-align: center;
            line-height: 45px;
            "><svg t="1728560180125" class="icowefberwrt34n" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="10575" width="200" height="200">
                    <path
                        d="M892.064 261.888a31.936 31.936 0 0 0-45.216 1.472L421.664 717.248l-220.448-185.216a32 32 0 1 0-41.152 48.992l243.648 204.704a31.872 31.872 0 0 0 20.576 7.488 31.808 31.808 0 0 0 23.36-10.112L893.536 307.136a32 32 0 0 0-1.472-45.248z"
                        p-id="10576" fill="#ffffff"></path>
                </svg></div>
            <div style="
             line-height: 65px;
             margin-left: 10px;
             font-size: 18px;
             font-weight: 700;
            ">已缴费</div>
        </div>
        <div style="
        height:1180px;
        background-color: #f2f2f2;
        overflow: hidden;
        ">
            <div style="
        height:168px;
        background-color: white;
        margin-top: 12px;
        width: 94%;
        margin-left: 10px;
        border-radius: 10px;
        ">
                <img style="
                width:300px;
                height:83px;
                margin-left: 25px;
                margin-top: 15px;
                " src="https://cdn7.axureshop.com/demo/2208121/images/%E7%BC%B4%E8%B4%B9%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u1321.png"
                    alt="">
                <p style="
                font-size: 14px;
                text-align: center;
                margin-top: 10px;
                font-weight: 700;
                ">20200101001598Z</p>
                <p style="
                 text-align: center;
                 color:#7F7F7F;
                  font-size: 13px;
                  margin-top: 5px;
                ">
                    取药或检查时请出示此码
                </p>

            </div>

            <div style="
                 height:160px;
                 background-color: white;
                 margin-top: 12px;
                 width: 322px;
                 margin-left: 10px;
                 border-radius: 10px;
                 padding:15px;
                 ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">缴费信息</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">登记号：20200101001598Z</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">就诊人：王小柯</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">就诊科室：门诊外一科</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">开单医生：刘医师</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">开单时间：2020-01-01 10:20:36</p>


            </div>
            <div style="
        height:465px;
        background-color: white;
        margin-top: 12px;
        width: 322px;
        margin-left: 10px;
        border-radius: 10px;
        padding:15px;
        ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">费用明细</p>
                <p style="
                font-size: 12px;  
                color:#1677FF;
                width:100%;
                background-color: #E5F1FF;
                text-align: center;
                margin-top: 20px;
                ">请前往一楼门诊药房2号窗口取药</p>

                <div style="
          font-size: 14px;
          display: flex;
          margin-top: 10px;
          ">
                    <div style="
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #e6f4ff;
          color:#4694ff;
          font-size: 10px;
          ">药</div><span style="margin-left: 6px;">处方号（20200101032）</span>
                </div>

                <br>
                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -6px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">1、葆宫止血颗粒*3盒</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥50.13
                    </div>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">2、维生素B1*2瓶</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥20.00
                    </div>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">3、维生素B2*2瓶</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥10.00
                    </div>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">4、维生素E*2瓶</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥10.00
                    </div>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -20px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">5、维生素C*2瓶</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥10.00
                    </div>
                </div>

                <hr color="#f2f2f2">

                <p style="
                font-size: 12px;  
                color:#fbb52b;
                width:100%;
                background-color: #fffbe6;
                text-align: center;
                margin-top: 20px;
                ">请前往一楼门诊药房2号窗口取药</p>

                <div style="
          font-size: 14px;
          display: flex;
          margin-top: 10px;
          ">
                    <div style="
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #fffbe6;
          color:#fbb52b;
          font-size: 10px;
          ">查</div><span style="margin-left: 6px;">检查单号（20200101133）</span>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: 10px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">1、CT</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥200.00
                    </div>
                </div>

                <div style="
            display: flex;
            justify-content: space-between;
            width: 105%;
            height: 50px;
            background-color: white;
            color:#7F7F7F;
            margin-top: -18px;
            margin-left: -18px;
            ">
                    <div style="
          font-size: 14px;
          display: flex;
          ">
                        <div style="
          margin-left: 20px;
                  text-align: center;                        
          font-size: 14px;
          ">2、上腹部CT平扫</div>
                    </div>
                    <div style="
                font-size: 14px;
                            ">
                        ￥200.00
                    </div>
                </div>

                <hr color="#f2f2f2">

                <p style="
            font-size: 16px;
            font-weight: 700;
            font-style: normal;
            color: #000000;
            text-align: right;
            margin-right: 0px;
            margin-top: 15px;
            ">合计：￥520.13</p>



            </div>

             <div style="
                 background-color: white;
                 margin-top: 12px;
                 width: 322px;
                 margin-left: 10px;
                 border-radius: 10px;
                 padding:15px;
                 ">
                <p style="
                font-weight: 700;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                ">订单信息</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">订单号：2021010156256894 <span style="margin-left: 100px;color:#1677ff;">复制</span></p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">订单流水号：400012021010156256894</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">订单金额：￥520.13</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">订单状态：已支付</p>
                <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">支付方式：微信支付</p>

                   <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">下单时间：2020-01-01 10:23:36</p>

                 <p style="
                font-weight: 400;
                font-style: normal;
                color: #000000;
                font-size: 14px;    
                text-align: left;
                margin-top: 10px;
                ">支付时间：2020-01-01 10:25:10</p>


            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const onClickLeft = () => {
    router.go(-1)
}

</script>

<style scoped>
.icowefberwrt34n {
    width: 20px;
    height: 20px;
}
</style>